<template>
  <div>
    <div class="header-title">目录清单发布</div>
    <div class="context">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="事项名称：">
          <el-input v-model="formInline.user" placeholder="请输入事项名称"></el-input>
        </el-form-item>
        <el-form-item label="基本编译：">
          <el-input v-model="formInline.user" placeholder="请输入基本编译"></el-input>
        </el-form-item>
        <el-form-item label="事项类型：">
          <el-select v-model="formInline.region" placeholder="请选择事项类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right; margin-left: 90px">
          <el-button type="primary" @click="onSubmit" style="width: 120px">搜索</el-button>
          <el-button type="success" @click="onSubmit" style="width: 120px">批量发布</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" label="序号" width="98"></el-table-column>
        <el-table-column label="事项类型" width="160">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="基本编码" width="140"></el-table-column>
        <el-table-column prop="address" label="事项名称" width="268" show-overflow-tooltip></el-table-column>

        <el-table-column prop="name" label="行使层级" width="210"></el-table-column>

        <el-table-column prop="name" label="是否主项" width="85"></el-table-column>

        <el-table-column prop="name" label="状态" width="74"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">查询</el-button>
            <el-button size="mini" type="warning" @click="handleDelete(scope.$index, scope.row)">子项</el-button>
            <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="90"></el-pagination>
    </div>
  </div>
</template>

<script>
  const cityOptions = [
    '国家级/局（署，会）',
    '省级/直属',
    '市级/隶属',
    '县级',
    '镇（乡，街道）级',
    '村（社区）级',
    '分级管理'
  ];
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        multipleSelection: [],

        checkboxGroup1: ['上海'],
        cities: cityOptions,
        radio1: '1',
        formInline: {
          user: '',
          region: ''
        },
        visible: false
      };
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  };
</script>

<style lang="scss">
  .header-title {
    height: 70px;
    border-bottom: 1px solid $bordercolor;
    color: #222;
    font-weight: bold;
    font-size: 24px;
    padding: 22px 30px;
    box-sizing: border-box;
  }
  .context {
    padding: 30px;
    box-sizing: border-box;
  }
  .fenye {
    width: 100%;
    height: 115px;
    position: relative;
    .el-pagination {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -200px;
      margin-top: -20px;
    }
  }
</style>
